<template>
  <div class="cart-container">
    <h1>于佳序22006380221的购物车</h1>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>封面</th>
          <th>药品名</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in yjxItems" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>
            <img 
              :src="item.image" 
              alt="封面" 
              class="book-image"
            />
          </td>
          <td>{{ item.name }}</td>
          <td>¥{{ item.price }}</td>
          <td>
            <button @click="yjxDecrease(item)" :disabled="item.quantity <= 1">-</button>
            {{ item.quantity }}
            <button @click="yjxIncrease(item)">+</button>
          </td>
          <td>
            <button @click="yjxRemoveItem(index)" class="delete-btn">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="total-price">总价钱：¥{{ yjxTotalPrice }}</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const yjxItems = ref([
  { 
    id: 1, 
    name: '板蓝根', 
    price: 30, 
    quantity: 1,
    image: new URL('@/assets/banlangen.png', import.meta.url).href 
  },
  { 
    id: 2, 
    name: '感康', 
    price: 54, 
    quantity: 1,
    image: new URL('@/assets/gankang.png', import.meta.url).href 
  },
  { 
    id: 3, 
    name: '布洛芬', 
    price: 39, 
    quantity: 1,
    image: new URL('@/assets/buluofen.png', import.meta.url).href
  },
  { 
    id: 4, 
    name: '甲硝锉片', 
    price: 19, 
    quantity: 1,
    image: new URL('@/assets/jiaxiaocuo.png', import.meta.url).href 
  },
])

const yjxIncrease = (item) => item.quantity++
const yjxDecrease = (item) => {
  if (item.quantity > 1) item.quantity--
}
const yjxRemoveItem = (index) => yjxItems.value.splice(index, 1)
const yjxTotalPrice = computed(() => 
  yjxItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
)
</script>

<style scoped>
body {
  background-color: #f5cbd2; /* 粉色背景 */
  background-image: url('@/assets/beijing.png');
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
}

.cart-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

.book-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

button {
  padding: 5px 10px;
  margin: 0 3px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: white;
  color: #333;
}

button:disabled {
  cursor: not-allowed;
  background-color: #eee;
  color: #aaa;
}

.delete-btn {
  background-color: #ff4444; /* 删除按钮为红色 */
  color: white;
  border: none;
}

.total-price {
  font-size: 1.2em;
  font-weight: bold;
  text-align: right;
  color: #333;
}

/* 粉色和蓝色主题 */
.cart-container {
  background-color: rgba(245, 203, 210, 0.9); /* 淡粉色背景 */
  border: 2px solid #87CEEB; /* 天蓝色边框 */
}

h1 {
  color: #87CEEB; /* 天蓝色标题 */
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 20px;
}

.total-price {
  background-color: rgba(255, 204, 255, 0.5); /* 淡粉色背景 */
  padding: 10px;
  border-radius: 8px;
  text-align: right;
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
}

@media (max-width: 768px) {
  table {
    font-size: 14px;
  }
  .book-image {
    width: 70px;
    height: 90px;
  }
  button {
    padding: 3px 8px;
  }
}
</style>